<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
			<style>
				/* 练习：1.圆形   2.正三角形
				 思路1：宽高与边框倒角一致				 
				 */
				div#circle{
					width: 400px;
					height: 400px;
					border: 1px solid red;
					border-radius: 50%;
					/* 边框阴影 box-shadow  属性 */
					box-shadow: 5px 5px 40px 10px red inset	;
				}
				/* 思路2：div#triangle   
				      css中：抓到div   【斜线】
				                左边框：50像素实线红色
				                右边框：50像素实线黄色
												 下边框：50像素实线黑色
				      注意：先别加宽高  transparent  透明色	 */
				div#triangle{
					width: 0;
					border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid black;
					/* 两行  倒三角  倒三角，蓝色，透明度 .3
					提醒：所有边框 50px solid transparent;
					 上边框颜色改为蓝色  0，0，255
					*/
				}
				div#inverted-triangle{
					width: 0;
					border: 50px solid transparent;
					border-top-color: rgba(0,0,255,.3);
				}
				/* outline   边框轮廓   只针对input  元素*/
				input{
					outline: 1px solid red;
				}
				/* 实际应用：通配选择器   去掉轮廓
				 *{ outline: 0;}
				 */
			</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		<div id="inverted-triangle"></div>
		边框：<input type="text" />
	</body>
</html>